<template>
    <div class="not-found">
      <img src="../assets/images/404.gif" alt="" />
      <div class="not-found-text" >
        <h1>404</h1>
        <p>抱歉，您访问的页面不存在</p>
        <p>请检查您输入的网址是否正确，或返回首页</p>
        <button @click="handleHome">返回首页</button>
      </div>
    </div>
  </template>
  <script setup>
  import { useRouter } from 'vue-router';
  const router = useRouter();
  const handleHome = () => {
    router.push('/');
  }
  </script>
  <style scoped>
  .not-found {
    width: 100%;
    height: 100vh;
    overflow: hidden;
  }
  
  .not-found>img {
    display: block;
    border-radius: 0px;
    width: 100% !important;
    height: 100% !important;
  }
  .not-found-text {
    position: absolute;
    top: 50%;
    left: 80%;
    transform: translate(-50%, -50%);
    color: #fff;
  }
</style>
